﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="http://www.jongma.org/webtools/jquery/jquery.xslt.js" type="text/javascript"></script>-->
    <script src="lib/jquery-latest.js" type="text/javascript"></script>
    <script src="lib/jquery.xslt.js" type="text/javascript"></script>
    <script src="lib/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
    <!--<script src="lib/jquery.link.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="lib/spine.js" type="text/javascript"></script>
    <script src="lib/spine.model.ajax.js" type="text/javascript"></script>
    <script src="lib/spine.model.local.js" type="text/javascript"></script>
    <script src="spine.model.ajax2.js" type="text/javascript"></script>
    <script src="app/cofe.js" type="text/javascript"></script>
    <script src="app/classes/cofe.link.js" type="text/javascript"></script>
    <script src="app/models/cofe.models.js" type="text/javascript"></script>
    <script src="app/models/cofe.models.entry.js" type="text/javascript"></script>
    <script src="app/models/cofe.models.file.js" type="text/javascript"></script>
    <script src="app/models/cofe.models.folder.js" type="text/javascript"></script>
    <script src="app/models/cofe.models.entryList3.js" type="text/javascript"></script>
    <script src="app/controllers/cofe.controllers.contentList3.js" type="text/javascript"></script>
    <script src="app/controllers/cofe.controllers.hierarchyTree3.js" type="text/javascript"></script>
    <script src="app/application.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8">
    <!--<script type="text/x-jquery-tmpl" id="hierarchyTreeTemplate">
    {{if last}}${label}{{else}}<a href="${'#' + path}">${label}</a>/{{/if}}     
    </script>-->
    <script type="text/x-jquery-tmpl" id="hierarchyTreeItemTemplate">
    <li class="item folder">
        ${label} {{if !last}}&nbsp;>&nbsp;{{/if}}
        <ul class="popup">            
        </ul> 
    </li>
    </script>
    <script type="text/x-jquery-tmpl" id="hierarchyTreeSubItemTemplate">
    <li class="subitem">
        ${label}
    </li>
    </script>
    <script type="text/x-jquery-tmpl" id="contentItemTemplate">
    {{if basetype == "File" }}
    <div class="item file">   
         <image src="${icon}" />
         <label class="label">${label}</label>    
         <label class="info">${sizeInK()} kb</label>       
    </div> 
    {{else}}
    <div class="item folder">        
        <image src="${icon}" />
        <label class="label">${label}</label>
       
        
        {{if hasfiles || hassubfolders}}
        <label class="info">&nbsp;[{{if hasfiles}}F{{/if}}{{if hassubfolders}}D{{/if}}]</label> 
        {{/if}}

    </div>
    {{/if}}            
    </script>
    <script type="text/x-jquery-tmpl" id="contentItemTemplate1">
    {{if basetype == "File" }}
    <div class="item file">   
       
        {{if typeof(links['download']) == 'object' }}
          <a href="${links['download'].uri}">${path}</a>
        {{else}}
          ${path}
        {{/if}}
    </div> 
    {{else}}
    <div class="item folder">        
            <a href="${'#' + path}">${path}/</a>        
    </div>
    {{/if}}            
    </script>
    <style type="text/css">
        html
        {
            height: 100%;
            width: 512px;
            margin-bottom: 1px;
            overflow: scroll;
        }
        .oddrow
        {
            padding: 5px;
            border-top: 1px groove gray;
        }
        .evenrow
        {
            padding: 5px;
            border-top: 1px groove gray;
        }
        
        
        #toolbar
        {
            font-weight: bold;
            text-shadow: 0 1px 1px #ffffff;
            font-size: 14px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            background: #ffffff;
            background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e0e1));
            background: -moz-linear-gradient(top, #ffffff, #e0e0e1);
            background: linear-gradient(top, #ffffff, #e0e0e1);
            -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: inset -1px -1px 3px #eeeeee, 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        #toolbar .item
        {
            float: left;
            line-height: 30px;
            height: 30px;
            padding: 0 20px;
            cursor: pointer;
            border-right: 1px solid rgba(0, 0, 0, 0.3);
        }
        
        #toolbar button
        {
        }
        
        #hierarchyBlock
        {
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            background: #ffffff;
        }
        
        #hierarchyBlock label
        {
            display: inline;
            font-weight: bolder;
        }
        
        #hierarchyTree
        {
            margin: 0;
            padding: 0;
            overflow: hidden;
            list-style: none;
            display: list-item;
        }
        
        #hierarchyTree .item 
        {
            float: left;
            cursor: pointer;
            display: inline;                        
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            border-top: 1px solid transparent;                         
        }
        
        #hierarchyTree .item .popup
        {
            position:absolute;            
            visibility:hidden;
            display: block;                        
            background-color: white;
            margin: -1px 0px 0px 0px;            
            padding: 0px 5px;            
            list-style:none;
            border: 1px solid rgba(0, 0, 0, 0.3);            
            max-height: 250px;
            min-width : 200px;
            overflow:auto;
        }
        
        #hierarchyTree .item:hover
        {
            background-color:#EEEEEE;            
            border-left: 1px solid black;
            border-right: 1px solid black;            
        }
        
        .subitem:hover
        {
            background-color:#EEEEEE;
        }
                
        #hierarchyTree .active .item .popup
        {            
            visibility:visible;
        }
        
        
        #contentList
        {
            margin: 0;            
            padding: 0;
            width: auto;
        }
        
        #contentList .item
        {
            line-height: 30px;
            height: 30px;
            padding: 0 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        }
        
        #contentList .info
        {
            color: Gray;
            font-size: 80%;
            float: right;
        }
        
        #contentList .label
        {
            cursor: pointer;
        }
        
        #contentList .file
        {
        }
        #contentList .folder
        {
            background-color: #EEEEEE;
        }
    </style>
    <title></title>
</head>
<body>
    <div id="toolbar">
        <button class="refresh option">
            Refresh</button>
    </div>
    <div id="hierarchyBlock">
        <!--<label>
            Current folder:&nbsp;&nbsp;
        </label>  -->
        <ul id="hierarchyTree">
        </ul>
    </div>
    <div id="contentList">
    </div>
</body>
</html>
